<template>
    <section>
        <!--工具条-->

        <div class="section-content clearfix">
            <el-col :span="24"  style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters">
                    <el-form-item style="float: left;">
                        
                <el-input v-model="filters.title" placeholder="标题" @keyup.enter.native="getUsers1()" style="width:200px;"></el-input>
                        <el-select v-model="filters.categoryId" placeholder="请选择文章类型">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in typelist" :label="item.name" :value="item.categoryId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item >
                            <el-select v-model="filters.status" placeholder="审核状态">
                                <el-option label="待审核" value="-1"></el-option>
                                <el-option label="已停用" value="0"></el-option>
                                <el-option label="已启用" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                          <el-form-item v-if="systemId==4||systemId==2">
                            <el-select v-model="filters.free" placeholder="审核状态">
                            <el-option label="所有" value=""></el-option>
                                <el-option label="免费" value="0"></el-option>
                                <el-option label="付费" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        
                    <el-form-item >
                        <el-button :type="buttonColor" v-on:click="getUsers1">查询</el-button>
                    </el-form-item>
                    <el-form-item>

                        <!-- <router-link > -->
                        <el-button :type="buttonColor" @click="handleAdd">新增</el-button>
                        <!-- </router-link> -->
                    </el-form-item>
                    <el-form-item>
                        <el-button :type="buttonColor" @click="typeget">类型管理</el-button>
                    </el-form-item>
                </el-form>
            </el-col>

            <!--列表-->
            <el-table :data="query" highlight-current-row v-loading="listLoading" :header-row-style="{backgroundColor: titleColor}" @selection-change="selsChange"
                style="width: 100%;">
                <!-- <el-table-column type="selection">
                </el-table-column> -->
                <el-table-column type="index" label="序号" width="80" :index="indexMethod">
                </el-table-column>
                <el-table-column prop="title" label="标题">
                </el-table-column>
                <el-table-column prop="description" label="简介">
                </el-table-column>

                <el-table-column label="类型" prop="remark" :formatter="formattype">
                </el-table-column>

                <el-table-column label="作者" prop="author">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column prop="updateTime" label="更新时间">
                </el-table-column>
                <el-table-column label="评论">
                    <template scope="scope">
                        <span class="pb-name" @click="details(scope.$index, scope.row)">
                            评论</span>
                    </template>
                </el-table-column>
                   <el-table-column label="状态操作">
                    <template scope="scope">
                        <span v-if="scope.row.status==1">已启用</span>
                        <el-button v-if="scope.row.status==1" size="small" @click="stateput( scope.row)"
                            type="small" plain>停用</el-button>
                            
                        <span v-if="scope.row.status==0">已停用</span>
                        <el-button v-if="scope.row.status==0" size="small" :type="buttonColor"
                            @click="stateput( scope.row)" plain>启用</el-button>
                             <span v-if="scope.row.status==-1">待审核</span>
                        <el-button v-if="scope.row.status==-1" size="small" :type="buttonColor"
                            @click="stateput( scope.row)" plain>启用</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="是否为热门">
                    <template scope="scope">
                        <span v-if="scope.row.top==0" class="pb-name" @click="typeput(scope.$index, scope.row)">
                            设置热门</span>
                        <span v-if="scope.row.top==1" class="pb-name" @click="typeput(scope.$index, scope.row)">
                            取消热门</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template scope="scope">
                        <i @click="handleEdit(scope.$index, scope.row)" title="编辑" icon="el-icon-edit" circle
                            class="pb-icon icon-edit"></i>
                        <i @click="handleDel(scope.$index, scope.row)" icon="el-icon-delete" circle title="删除"
                            class="pb-icon icon-delete"></i>

                    </template>
                </el-table-column>
            </el-table>

            <!--工具条-->
            <el-col :span="24" class="toolbar">
                <!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> -->
                <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10"
                    :total="total" style="float:right;">
                </el-pagination>
            </el-col>
        </div>
        <!--编辑界面-->
        <el-dialog title="编辑" :close-on-click-modal="false" v-show="editFormVisible" :custom-class="dialogTitleColor" v-model="editFormVisible"
            @close="editFormVisible=false">
            <div slot="footer" style="text-align: left; ">

                <el-form :model="editForm" label-width="110px" :rules="editFormRules" ref="editForm">
                    <el-form-item label="标题" class="grade" prop="title">
                        <el-input v-model="editForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="作者" class="grade" prop="author">
                        <el-input v-model="editForm.author"></el-input>

                    </el-form-item>
                    <el-form-item label="简介" prop="description">
                        <el-input type="textarea" v-model="editForm.description"></el-input>

                    </el-form-item>


                    <el-form-item label="分类" class="grade" prop="categoryId">
                        <el-select v-model="editForm.categoryId" placeholder="请选择文章类型">
                            <el-option v-for="item in typelist" :label="item.name" :value="item.categoryId"></el-option>
                        </el-select>
                    </el-form-item>
                      <!-- <el-form-item v-if="systemId==4||systemId==2" label="价格" class="grade">
                         <el-radio v-model="editForm.free" label="0">免费</el-radio>
                        <el-radio v-model="editForm.free" label="1">收费
                            
                               <el-select v-model="editForm.price" placeholder="请选择文章类型">
                            <el-option  label="1元" value="1"></el-option>
                            <el-option  label="3元" value="3"></el-option>
                            <el-option  label="6元" value="6"></el-option>
                            <el-option  label="8元" value="8"></el-option>
                            <el-option  label="12元" value="12"></el-option>
                            <el-option  label="18元" value="18"></el-option>
                            <el-option  label="25元" value="25"></el-option>
                            <el-option  label="30元" value="30"></el-option>
                        </el-select>
                               </el-radio>
                    </el-form-item> -->
                    <el-form-item label="预览图">
                            请上传 2:1尺寸图片
                        <el-upload class="avatar-uploader" :headers="fileList" :show-file-list="false"
                            action="https://api.okidea3d.com/api/auth/image_file/upload"
                            :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload1">
                            <img v-if="editForm.image" :src="editForm.image" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            
                        </el-upload>
                       
                    </el-form-item>
                    <el-form-item v-if="systemId==4" label="轮播图片集">
                        <el-upload action="https://api.okidea3d.com/api/auth/image_file/upload" :show-file-list="true"
                            :file-list="imgs" list-type="picture-card" :headers="fileList"
                             :on-remove="handleRemove"
                            :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload1">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>

                    <el-form-item label="html编辑" v-if="systemId==1||systemId==0">
                        <quill-editor ref="text" v-model="editForm.content" class="myQuillEditor"
                            :options="editorOption" />
                    </el-form-item>
                    <el-form-item v-if="systemId==2" label="上传方式">
                        <el-radio-group v-model="video_true">
                            <el-radio label="0">文件视频上传</el-radio>
                            <el-radio label="1">链接视频上传</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="video_true==1" label="链接上传">

                        <el-input v-model="editForm.content.vod_url" style="width: 45%" placeholder="视频url">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="文件上传" v-if="systemId!=1&&systemId!=0">

                       
                        <el-upload v-if="systemId==4" class="upload-demo" :headers="fileList" multiple :limit="1"
                            :on-exceed="handleExceed" :on-change="handleChange"
                            action="https://api.okidea3d.com/api/auth/model_file/upload?index=1" accept=".STL"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :file-list="fileitem4"
                            :on-remove="handleRemove4">
                            <el-button size="small" :type="buttonColor">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传STL文件  <el-button v-if="systemId==4" :type="buttonColor" @click.native="iframe_tab()" :loading="editLoading">预览
                            </el-button>
                               <el-button :type="buttonColor" @click.native="add_gcode(2)" >新增
                           
                            </el-button>
                            </div>
                        </el-upload>
                        
                        <div v-if="systemId==4" v-for="(item,index) in gcode_list1"  class="gcode_border">
                             <el-upload  class="upload-demo" :headers="fileList" multiple :limit="1"
                            :on-exceed="handleExceed" :on-change="handleChange"
                             :action="action_url+index" accept=".gcode,.zip"
                            :on-success="handleAvatarSuccess4" :before-upload="beforeAvatarUpload" :file-list="item.fileitem4"
                            :on-remove="(file, fileList)=>handleRemove5(file, fileList,index)">
                            <el-button size="small" :type="buttonColor">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传gcode文件、zip文件
                                
                                <el-button :type="buttonColor" @click.native="del_gcode1(index)" >删除</el-button>
                                     <el-input v-model="item.name" style="width: 45%" placeholder="请填写gcode名称">
                            </el-input>
                            <!-- <el-select >
                                <el-option>1</el-option>
                            </el-select> -->
                            </div>
                        </el-upload>
                            <div style="display: inline-block;width: 45%">材质(PLA)</div>
                            <div style="display: inline-block;width: 45%">大小(单位：字节)</div>
                            <el-input v-model="item.materials" style="width: 45%" placeholder="请填写材质" disabled>
                            </el-input>

                            <el-input v-model="item.size" style="width: 45%" disabled>
                            </el-input>

                            <div style="display: inline-block;width: 45%">打印时长(单位：分钟)</div>
                            <div style="display: inline-block;width: 45%">体积(长度X宽度X高度)mm</div>
                            <el-input v-model="item.duration" style="width: 45%" placeholder="请填写打印时长(单位：分钟)">
                            </el-input>

                            <el-input v-model="item.volume" style="width: 45%" placeholder="请填写体积(长度X宽度X高度)mm">
                            </el-input>
                        </div>

                        <el-upload v-if="systemId==3" class="upload-demo" :headers="fileList" multiple :limit="4"
                            :on-exceed="handleExceed" :on-change="handleChange"
                            action="https://api.okidea3d.com/api/auth/image_file/upload" accept=".png,.jpg"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :file-list="fileitem">
                            <el-button size="small" :type="buttonColor">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
                        </el-upload>

                        <el-upload v-if="systemId==2&&video_true==0" class="upload-demo" :headers="fileList" multiple
                            :limit="1" :on-exceed="handleExceed" :on-change="handleChange"
                            action="https://api.okidea3d.com/api/auth/video_file/upload" accept=".mp4,.flv"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :file-list="fileitem">
                            <el-button size="small" :type="buttonColor">点击上传</el-button>

                            <div slot="tip" class="el-upload__tip">只能上传视频文件

                            </div>
                        </el-upload>
                        <div v-if="systemId==2">

                            <div style="display: inline-block;width: 45%">导演</div>

                            <div style="display: inline-block;width: 45%">时长</div>

                            <el-input v-model="editForm.content.vod_director" style="width: 45%" placeholder="请填写导演">
                            </el-input>

                            <el-input v-model="editForm.content.time" style="width: 45%" placeholder="请填写时长"></el-input>
                            <el-select v-model="editForm.devicetype" placeholder="请选择设备型号">
                                <el-option v-for="item in devicetypeList" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:right;">


                  
                    <el-button @click.native="editFormVisible = false">取消</el-button>
                    <el-button :type="buttonColor" @click.native="editSubmit" :loading="editLoading">提交</el-button>
                </div>
            </div>
        </el-dialog>

        <!--新增界面-->
        <el-dialog title="新增" :close-on-click-modal="false" v-show="addFormVisible" :custom-class="dialogTitleColor" v-model="addFormVisible"
            @close="addFormVisible=false">
            <div slot="footer" style="text-align: left; ">
                <el-form :model="addForm" label-width="110px" :rules="addFormRules" ref="addForm">
                    <el-form-item label="标题" class="grade" prop="title">
                        <el-input v-model="addForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="作者" class="grade" prop="author">
                        <el-input v-model="addForm.author"></el-input>
                    </el-form-item>
                    <el-form-item label="简介" prop="description">
                        <el-input type="textarea" v-model="addForm.description"></el-input>
                    </el-form-item>
                    <el-form-item label="分类" class="grade" prop="categoryId">
                        <el-select v-model="addForm.categoryId" placeholder="请选择文章类型">
                            <el-option v-for="item in typelist" :label="item.name" :value="item.categoryId"></el-option>
                        </el-select>
                    </el-form-item>
                          <!-- <el-form-item v-if="systemId==4||systemId==2" label="价格" class="grade">
                     

                         <el-radio v-model="addForm.free" label="0">免费</el-radio>
                        <el-radio v-model="addForm.free" label="1">收费 
                                  <el-select v-model="addForm.price" placeholder="请选择文章类型">
                            <el-option  label="1元" value="1"></el-option>
                            <el-option  label="3元" value="3"></el-option>
                            <el-option  label="6元" value="6"></el-option>
                            <el-option  label="8元" value="8"></el-option>
                            <el-option  label="12元" value="12"></el-option>
                            <el-option  label="18元" value="18"></el-option>
                            <el-option  label="25元" value="25"></el-option>
                            <el-option  label="30元" value="30"></el-option>
                        </el-select>
                        </el-radio>
                    </el-form-item> -->
                    <el-form-item label="预览图">
                        请上传 2:1尺寸图片
                        <el-upload class="avatar-uploader" :headers="fileList" :show-file-list="false"
                            action="https://api.okidea3d.com/api/auth/image_file/upload" accept=".png,.jpg"
                            :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload1">
                            <img v-if="addForm.image" :src="addForm.image" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item v-if="systemId==4" label="轮播图片集">
                        <el-upload action="https://api.okidea3d.com/api/auth/image_file/upload" :show-file-list="true"
                            :file-list="imgs" list-type="picture-card" :headers="fileList"
                          :on-remove="handleRemove1"
                            :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload1">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item v-if="systemId==2" label="上传方式">
                        <el-radio-group v-model="video_true">
                            <el-radio label="0">文件视频上传</el-radio>
                            <el-radio label="1">链接视频上传</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="video_true==1" label="链接上传">
                        <el-input v-model="addForm.content.vod_url" style="width: 45%" placeholder="视频url">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="文件上传"  v-if="systemId!=1&&systemId!=0">
                        <el-upload v-if="systemId==4" class="upload-demo" :headers="fileList" multiple :limit="1"
                            :on-exceed="handleExceed" :on-change="handleChange"
                            action="https://api.okidea3d.com/api/auth/model_file/upload" accept=".STL"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :file-list="fileitem4"
                            :on-remove="handleRemove4">
                            <el-button size="small" :type="buttonColor">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传STL文件  <el-button v-if="systemId==4" :type="buttonColor" @click.native="iframe_tab(1)" :loading="editLoading">预览
                                    </el-button>
                           <el-button :type="buttonColor" @click.native="add_gcode(1)" >新增
                           
                            </el-button></div>
                        </el-upload>
                        <div v-if="systemId==4" v-for="(item,index) in gcode_list" class="gcode_border">
                        <el-upload  class="upload-demo" :headers="fileList" multiple :limit="1"
                            :on-exceed="handleExceed" :on-change="handleChange"
                            :action="action_url+index" accept=".gcode,.zip"
                            :on-success="handleAvatarSuccess3" :before-upload="beforeAvatarUpload" :file-list="fileitemg"
                            :on-remove="handleRemove4">
                            <el-button size="small" :type="buttonColor">点击上传</el-button>
                            
                            <div slot="tip" class="el-upload__tip">只能上传gcode文件、zip文件
                                <el-button :type="buttonColor" @click.native="del_gcode(index)" >删除
                            </el-button>
                               <el-input v-model="item.name" style="width: 45%" placeholder="请填写gcode名称">
                            </el-input>
                             <el-select v-model="addForm.devicetype" placeholder="请选择设备型号">
                                <el-option v-for="item in devicetypeList" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                            </div>
                        </el-upload>

                            <div style="display: inline-block;width: 45%">材质(PLA)</div>
                            <div style="display: inline-block;width: 45%">大小(单位：字节)</div>
                            <el-input v-model="item.materials" style="width: 45%" placeholder="请填写材质" disabled>
                            </el-input>

                            <el-input v-model="item.size" style="width: 45%" disabled >
                            </el-input>

                            <div style="display: inline-block;width: 45%">打印时长(单位：分钟)</div>
                            <div style="display: inline-block;width: 45%">体积(长度X宽度X高度)mm</div>
                            <el-input v-model="item.duration" style="width: 45%" placeholder="请填写打印时长(单位：分钟)">
                            </el-input>

                            <el-input v-model="item.volume" style="width: 45%" placeholder="请填写体积(长度X宽度X高度)mm">
                            </el-input>
                        </div>
                        <el-upload v-if="systemId==3" class="upload-demo" :headers="fileList" multiple :limit="4"
                            :on-exceed="handleExceed" :on-change="handleChange"
                            action="https://api.okidea3d.com/api/auth/image_file/upload" accept=".png,.jpg"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :file-list="fileitem">
                            <el-button size="small" :type="buttonColor">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
                        </el-upload>
                        <el-upload v-if="systemId==2&&video_true==0" class="upload-demo" :headers="fileList" multiple
                            :limit="1" :on-exceed="handleExceed" :on-change="handleChange"
                            action="https://api.okidea3d.com/api/auth/video_file/upload" accept=".mp4,.flv"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :file-list="fileitem">
                            <el-button size="small" :type="buttonColor">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传视频文件

                            </div>
                        </el-upload>
                        <div v-if="systemId==2">

                            <div style="display: inline-block;width: 45%">导演</div>

                            <div style="display: inline-block;width: 45%">时长</div>

                            <el-input v-model="addForm.content.vod_director" style="width: 45%" placeholder="请填写导演">
                            </el-input>

                            <el-input v-model="addForm.content.time" style="width: 45%" placeholder="请填写时长"></el-input>

                        </div>
                  
                        <!-- <el-button :type="buttonColor" @click="submit">提交</el-button> -->

                    </el-form-item>
                       <el-form-item label="html编辑"  v-if="systemId==1||systemId==0">
                        <quill-editor ref="text" v-model="addForm.content" class="myQuillEditor"
                            :options="editorOption" />
                    </el-form-item>



                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:right;">

                  
                    <el-button @click.native="addFormVisible = false">取消</el-button>
                    <el-button :type="buttonColor" @click.native="addSubmit" :loading="editLoading">提交</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="图片剪裁" :visible.sync="dialogVisible" :custom-class="dialogTitleColor" append-to-body>
            <div class="cropper-content">
                <div class="cropper" style="text-align:center">
                    <vueCropper ref="cropper" :img="option.img" :outputSize="option.size"
                        :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove"
                        :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop"
                        :fixed="option.fixed" :fixedNumber="option.fixedNumber" :centerBox="option.centerBox"
                        :infoTrue="option.infoTrue" :fixedBox="option.fixedBox" @realTime="realTime"></vueCropper>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button :type="buttonColor" @click="finish" :loading="loading">确认</el-button>
            </div>
        </el-dialog>
        <el-dialog title="模型图预览" :visible.sync="iframeVisible" :custom-class="dialogTitleColor" append-to-body>
            <div class="cropper-content">

                <iframe v-if="systemId==4" :src="model_src" width="50%;"
                    style="height:360px;border: 0;width: 100%;"></iframe>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="iframeVisible = false">取 消</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>
    // import util from './../common/js/util'
    //import NProgress from 'nprogress'
    import {
        quillEditor
    } from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import {

        cms_category_query,
        cms_article_query,
        cms_article_post,
        cms_article_put,
        cms_article_delete,
        cms_article_get,
        image_file_upload,
        cms_article_set_status,
        device_type_query

    } from '../../api/api';
    import {
        VueCropper
    } from 'vue-cropper'

    export default {

        data() {


            return {
                action_url:'https://api.okidea3d.com/api/auth/model_file/upload?index=',
                iframeVisible: false,
                dialogVisible: false,
                // 裁剪组件的基础配置option
                option: {
                    img: '', // 裁剪图片的地址
                    info: true, // 裁剪框的大小信息
                    outputSize: 0.8, // 裁剪生成图片的质量
                    outputType: 'jpeg', // 裁剪生成图片的格式
                    canScale: false, // 图片是否允许滚轮缩放
                    autoCrop: true, // 是否默认生成截图框
                    // autoCropWidth: 300, // 默认生成截图框宽度
                    // autoCropHeight: 200, // 默认生成截图框高度
                    fixedBox: true, // 固定截图框大小 不允许改变
                    fixed: true, // 是否开启截图框宽高固定比例
                    fixedNumber: [4, 2], // 截图框的宽高比例
                    full: true, // 是否输出原图比例的截图
                    canMoveBox: false, // 截图框能否拖动
                    original: false, // 上传图片按照原始比例渲染
                    centerBox: false, // 截图框是否被限制在图片里面
                    infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
                },
                picsList: [], //页面显示的数组
                // 防止重复提交
                loading: false,
                devicetypeList:'',
                model_src: '',
                video_true: '0',
                imgs: [],
                dialogImageUrl: '',
                dialogVisible: false,
                fileitem4: [],
                fileitemg: [],
                fileitem: [],
                content: '',
                editorOption: {},
                fileList: {

                    token: JSON.parse(localStorage.getItem('key'))
                },
                addFormVisible: false,
                addForm: {
                    con_type: location.href.split("article/list")[1],
                    content: [],
                    allowcomments: '',
                    articleId: '',
                    categoryId: '',
                    author: 'goofoo',
                    description: '',
                    down: '',
                    fromurl: '',
                    image: '',
                    imgs: [],
                    keywords: '',
                    orders: '',
                    readnumber: '',
                    status: '',
                    systemId: location.href.split("article/list")[1],
                    title: '',
                    topicId: '',
                    type: '',
                    up: '',
                    userId: '',
                    path: '',
                    devicetype:''
                },
                systemId: '',
                unitlist: '',
                alaem_grade: '',
                alarmUserList: [], //告警组ID
                alarmUserLists: [], //告警人ID
                alarmTypeValue: '',
                filters: {
                    categoryId: '',
                    status,
                    title:'',
                    free:''
                },
                typelist: [],
                query: [],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [], //列表选中列
                editFormVisible: false, //编辑界面是否显示
                editLoading: false,

                editForm: {
                    alarmTypeId: '',
                    name: '',
                    deviceDataRecipeId: '',
                    deviceDataRecipeBodyId: '',
                    level: '',
                    register: '',
                    triggerCondition: '',
                    inputMin: '',
                    inputMax: '',
                    alarmMode: '',
                    isSave: '',
                    status: '',
                    customContent: '',
                    customContentNormal: '',
                    remark: '',
                    alarmTriggerGroupList: [],
                    alarmUserList: [],
                    alarmUserLists: [],
                    devicetype:''
                },
                alarmtype: '',
                device_data: '',
                device_datalist: '',
                editFormRules: {

                    title: [{
                        required: true,
                        message: '标题必填',
                        trigger: 'blur'
                    }, {
                        min: 1,
                        max: 20,
                        message: '长度在 1 到 20 个字符',
                        trigger: 'blur'
                    }],
                    author: [{
                        required: true,
                        message: '作者必填',
                        trigger: 'blur'
                    }, {
                        min: 1,
                        max: 20,
                        message: '长度在 1 到 20 个字符',
                        trigger: 'blur'
                    }],
                    description: [{
                        required: true,
                        message: '简介必填',
                        trigger: 'blur'
                    }, {
                        min: 1,
                        max: 100,
                        message: '长度在 1 到 100 个字符',
                        trigger: 'blur'
                    }],
                    categoryId: [{
                        required: true,
                        message: '分类必填',
                        trigger: 'blur'
                    }],

                },
                addFormRules: {

                    title: [{
                        required: true,
                        message: '标题必填',
                        trigger: 'blur'
                    }, {
                        min: 1,
                        max: 20,
                        message: '长度在 1 到 20 个字符',
                        trigger: 'blur'
                    }],
                    author: [{
                        required: true,
                        message: '作者必填',
                        trigger: 'blur'
                    }, {
                        min: 1,
                        max: 20,
                        message: '长度在 1 到 20 个字符',
                        trigger: 'blur'
                    }],
                    description: [{
                        required: true,
                        message: '简介必填',
                        trigger: 'blur'
                    }, {
                        min: 1,
                        max: 100,
                        message: '长度在 1 到 100 个字符',
                        trigger: 'blur'
                    }],
                    categoryId: [{
                        required: true,
                        message: '分类必填',
                        trigger: 'blur'
                    }],

                },
                fileinfo: '',
                gcode_list:[{
                     duration: "",
                    gcode_file: "",
                    materials: "PLA",
                    size: "",
                    volume: "",
                }],
                 gcode_list1:[{
                     name:'',
                     duration: "",
                    gcode_file: "",
                    materials: "PLA",
                    size: "",
                    volume: "",
                }],

            }


        },
        computed:{
            buttonColor(){
                return this.$store.state.buttonColor
            },
            titleColor(){
                return this.$store.state.titleColor
            },
            dialogTitleColor(){
                return this.$store.state.dialogTitleColor
            },
        },
        components: {
            VueCropper,
            quillEditor
        },
        methods: {
             stateput(s) {
                 let num;
                 if(s.status==1){
                    num=0;
                 }else{
                    num=1;
                 }
                let para = {
                    articleId: s.articleId,
                    statues:num
                }
                if (num == 1) {

                    cms_article_set_status(para).then((res) => {

                         this.begCode(res.code,res.message);
                        if (res.code == 0) {

                            //NProgress.done();
                            this.$message({
                                message: '启用成功',
                                type: 'success'
                            });

                            this.getUsers();

                        }
                    });
                } else {

                    cms_article_set_status(para).then((res) => {

                         this.begCode(res.code,res.message);
                        if (res.code == 0) {

                            //NProgress.done();
                            this.$message({
                                message: '停用成功',
                                type: 'success'
                            });

                            this.getUsers();

                        }
                    });
                }

            },
            del_gcode1(s){

                this.gcode_list1.splice(s, 1);
            },
            del_gcode(s){
                this.gcode_list.splice(s, 1);
            },
            add_gcode(s){
                if(s==1){
                this.gcode_list.push({
                 duration: "",
                    gcode_file: "",
                    materials: "PLA",
                    size: "",
                    volume: "",
                    name:''
                })
                }else{
                this.gcode_list1.push({
                 duration: "",
                    gcode_file: "",
                    materials: "PLA",
                    size: "",
                    volume: "",
                    name:''
                })
                }
               
            },
            iframe_tab(s) {
                if (s == 1) {
                    if (this.addForm.content.gcode_file) {

                        this.addForm.content.gcode_file = this.addForm.content.gcode_file.replace(
                            'https://res',
                            'https://mng');
                    }
                    if (this.addForm.content.stl_file) {

                        this.addForm.content.stl_file = this.addForm.content.stl_file.replace(
                            'https://res',
                            'https://mng');
                    }
                    this.model_src = 'https://mng.okidea3d.com/thl/thl.html?gcode_file=' + this
                        .addForm.content
                        .gcode_file + '&stl_file=' + this.addForm.content.stl_file + "&s=" + Math
                        .ceil(Math.random() * 10000);
                } else {
                    if (this.editForm.content.gcode_file) {

                        this.editForm.content.gcode_file = this.editForm.content.gcode_file.replace(
                            'https://res',
                            'https://mng');
                    }
                    if (this.editForm.content.stl_file) {

                        this.editForm.content.stl_file = this.editForm.content.stl_file.replace(
                            'https://res',
                            'https://mng');
                    }
                    this.model_src = 'https://mng.okidea3d.com/thl/thl.html?gcode_file=' + this
                        .editForm.content
                        .gcode_file + '&stl_file=' + this.editForm.content.stl_file + "&s=" + Math
                        .ceil(Math.random() * 10000);
                }

                this.iframeVisible = true;
            },
            //选择图片裁剪

            imgTrick(src) {
                const img = new Image()
                img.src = src;
                img.crossOrigin = 'anonymous';
                return img
            },
            changeUpload(file, fileList) {
                console.log(file)
                console.log(fileList)
                const isLt5M = file.size / 1024 / 1024 < 5
                if (!isLt5M) {
                    this.$message.error('上传文件大小不能超过 5MB!')
                    return false
                }
                this.fileinfo = file

                // 上传成功后将图片地址赋值给裁剪框显示图片
                this.$nextTick(() => {
                    this.option.img = imgTrick(file.url);
                    this.dialogVisible = true
                })
            }, // 点击裁剪，这一步是可以拿到处理后的地址
            finish() {
                this.$refs.cropper.getCropBlob((data) => {
                    var fileName = 'goods' + this.fileinfo.uid
                    // this.loading = true
                    console.log(data);
                    console.log(this.fileinfo.name);
                    let formData = new FormData();
                    // formData.append('filename',this.fileinfo.name)
                    formData.append('file', data, this.fileinfo.name);
                    console.log(formData)
                    this.$axios.post('https://api.okidea3d.com/api/auth/image_file/upload', formData, {
                        'Content-Type': 'multipart/form-data'
                    }).then(res => {
                        this.dialogVisible = false;

                        console.log(res);
                        this.addForm.image = res.data.data.path;
                        this.editForm.image = res.data.data.path;
                        console.log(res.data.data.path);
                        // this.form.devicePictureList[0].path = res.data.path;
                    })
                    // image_file_upload(data).then((res) => {
                    //     this.begCode(res.code, res.message);

                    //     this.addFormVisible = false;
                    //     if (res.code == 0) {

                    //      }
                    // });


                    //上传阿里云服务器
                    // client().put(fileName, data).then(result => {
                    //     this.dialogVisible = false
                    //     this.picsList.push(result.url)
                    // }).catch(err => {
                    //     console.log(err)
                    //     this.loading = false
                    // })
                })
            },
            details(index, row) {

                sessionStorage.setItem('articleId', row.articleId)
                this.$router.push({
                    path: '/article/remark'
                })
            },
            handleRemove(file, fileList) {
                this.editForm.imgs=[];
                for(let i in fileList){
                    this.editForm.imgs.push(fileList[i].url);
                }
            },
            handleRemove1(file, fileList){
                this.addForm.imgs=[];
                for(let i in fileList){
                    this.addForm.imgs.push(fileList[i].url);
                }
            },
              handleRemove5(s,e,d){
                  console.log(s,e,d);
                  this.gcode_list1[d].gcode_file='';
                  console.log(this.gcode_list1);
              },
            handleRemove4(file, fileList) {
                console.log(file, fileList);
                if (file.name.indexOf('gcode')==-1) {
                    this.addForm.content.stl_file = '';
                } else {

                    this.addForm.content.gcode_file = '';
                }
                if (file.name.indexOf('gcode')==-1) {
                    this.editForm.content.stl_file = '';
                } else {

                    this.editForm.content.gcode_file = '';
                }

                console.log(this.editForm.content)
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            typeget() {
                this.$router.push({
                    path: '/article/typelist' + this.systemId
                })
            },
            handleAvatarSuccess2(res, file) {
                console.log(res.data.path)
                
                this.addForm.imgs.push(res.data.path);
                this.editForm.imgs.push(res.data.path);
                // this.editForm.imgs=[];

            },
            handleAvatarSuccess3(res,file){

  console.log(res);
                console.log(file);
if(res.code==0){
     this.gcode_list[res.data.index].name=file.name;
    this.gcode_list[res.data.index].gcode_file=res.data.path;
    this.gcode_list[res.data.index].size=file.size;
}
                console.log(this.gcode_list);
              
            },
               handleAvatarSuccess4(res,file){

                console.log(res);
                console.log(file);
                if(res.code==0){
                    
                    this.gcode_list1[res.data.index].name=file.name;
                    this.gcode_list1[res.data.index].gcode_file=res.data.path;
                    this.gcode_list1[res.data.index].size=file.size;
                }
                console.log(this.gcode_list);
              
            },
            handleAvatarSuccess1(res, file) {
                console.log(file)
                console.log(res)
                this.fileinfo = file

                // 上传成功后将图片地址赋值给裁剪框显示图片
                this.$nextTick(() => {
                    console.log(res.data.path);
                     res.data.path = res.data.path.replace(
                        'http',
                        'https');
                    res.data.path = res.data.path.replace(
                        'https://res',
                        'https://mng');
                    // let img=this.imgTrick(res.data.path)
                    // console.log(img)
                    this.option.img = res.data.path;
                    this.dialogVisible = true
                })
                // this.addForm.image = res.data.path;
                // this.editForm.image = res.data.path;
                // this.form.devicePictureList[0].path = res.data.path;
            },
            beforeAvatarUpload1(file) {
                console.log(file);
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isGIF = file.type === 'image/gif';
                let tp = false;
                if (isJPG) {
                    tp = isJPG;
                } else if (isPNG) {
                    tp = isPNG
                } else if (isGIF) {
                    tp = isGIF
                } else {

                }
                const isLt2M = file.size / 1024 / 1024 < 1;
                if (!isJPG && !isPNG && !isGIF) {
                    this.$message.error('上传头像图片只能是 JPG,GIF,PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 1MB!');
                }
                return tp && isLt2M;
            },
            submit() {
                console.log(this.$refs.text.value)
            },
            handleExceed(files, fileList) {
                this.$message.warning(`上传文件有个数限制`);
            },
            handleAvatarSuccess(res, file) {
                console.log(file);

                this.begCode(res.code, res.message);
                if (res.code != 0) {
                    this.fileitem = [];
                }
                console.log(res);
                console.log(this.editForm.content);
                console.log(this.addForm.content);
                // if (!this.editForm.conten&&this.systemId==3) {
                //     this.editForm.content = []
                //     this.addForm.content =[];
                // }else if(this.addForm.content==[]&&this.systemId==4){
                //     this.addForm.content ={};
                // }else{
                //     this.editForm.content = {};
                //     this.addForm.content ={};
                // }
                if (this.systemId == 3) {

                    this.addForm.content.push(res.data.path);
                    this.editForm.content.push(res.data.path);
                } else if (this.systemId == 2) {
                    this.addForm.content = {
                        vod_url: res.data.path
                    }
                    this.editForm.content = {
                        vod_url: res.data.path
                    }

                } else if (this.systemId == 4) {
                    
                
                    if (file.name.indexOf('gcode')!=-1) {
                    this.addForm.content.size=file.size;
                        this.addForm.content.gcode_file = res.data.path;
                    } else {

                        this.addForm.content.stl_file = res.data.path;
                    }

                    if (file.name.indexOf('gcode')!=-1) {
                        this.editForm.content.size=file.size;
                        this.editForm.content.gcode_file = res.data.path;
                    } else {

                        this.editForm.content.stl_file = res.data.path;
                    }
                    console.log(this.addForm.content);
                    console.log(this.fileitem);
                    // this.editForm.content.stl_file = res.data.path;

                }
                console.log(this.addForm);  
                console.log(this.editForm);
                // this.addForm.ftpPath = res.data.ftpPath;
                // this.disableditem = true;
            },
            beforeAvatarUpload(file) {
                console.log(typeof file.name)
                let name = file.name;

                console.log(file);
                console.log(name);
                console.log(this.fileitem);
                if (this.systemId == 4) {
                    if (file.type == "application/vnd.ms-pki.stl") {
                        // this.fileitem.push({
                        //     name: "stl文件:" + file.name,
                        //     url: file.name
                        // })
                    } else {
                        this.fileitem.push({
                            name: "gcode文件:" + file.name,
                            url: file.name
                        })
                    }
                    this.addForm.content.size=file.size;
                    this.editForm.content.size=file.size;

                }


                console.log(this.fileitem);
                var index = name.lastIndexOf("\.");
                this.fileList.name = name.substring(0, index);
                this.fileList.name = '123';
                // this.addForm.fileSize = file.size;
                var patrn = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;

                // this.fileList.softCode=this.addForm.softCode;
                // this.fileList.version=this.addForm.version1;


                const isBIN = file.type === 'application/octet-stream';
                let tp = true;
                // const isLt2M = true;
                const isLt2M = file.size / 1024 / 1024 < 50;
                console.log(isLt2M)
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 50MB,请压缩后上传!');
                }
                return tp && isLt2M;
            },
            addSubmit() {

                this.$refs.addForm.validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    if(this.systemId==4){
                        this.addForm.content.gcode_list=this.gcode_list;
                             for(let i in this.gcode_list){
                            if(!this.gcode_list[i].name){
                                  this.$message({
                                            message: '请填写gcode文件名称',
                                            type: 'error'
                                        });
                                return false
                            }
                        }
                    }
                    console.log(this.addForm.content);
                    this.addForm.content = JSON.stringify(this.addForm.content);
                    let para = Object.assign({}, this.addForm);
                    
                    para.imgs = JSON.stringify(para.imgs);
                  para.price=para.price*100;
                    console.log(this.addForm)
                    cms_article_post(para).then((res) => {
                        this.begCode(res.code, res. message);

                        this.addFormVisible = false;
                        if (res.code == 0) {
                            this.editLoading = false;
                            //NProgress.done();
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            this.$refs['editForm'].resetFields();
                            this.getUsers();
                            this.addForm = {
                                con_type: location.href.split("article/list")[1],
                                content: [],
                                allowcomments: '',
                                articleId: '',
                                categoryId: '',
                                author: 'goofoo',
                                description: '',
                                down: '',
                                fromurl: '',
                                image: '',
                                imgs: [],
                                keywords: '',
                                orders: '',
                                readnumber: '',
                                status: '',
                                systemId: location.href.split("article/list")[1],
                                title: '',
                                topicId: '',
                                type: '',
                                up: '',
                                userId: '',
                                path: '',

                            };
                            this.gcode_list=[{
                                duration: "",
                                gcode_file: "",
                                materials: "PLA",
                                size: "",
                                volume: "",
                            }]
                        }
                    });
                })
            },
            getUsers1() {
                this.page = 1;
                this.total = 0;
                this.getUsers()
            },
            formattype(row, column) {
                let num = '';
                if (row.categoryId == null) {
                    return '未知';
                    return false;
                }
                for (let i in this.typelist) {
                    let obj = '';
                    obj = this.typelist.find((item) => {
                        return item.categoryId == row.categoryId;
                    });
                    if (obj == undefined) {
                        return '未知';
                        return false;
                    }
                    num = obj.name;
                }
                return num;
            },
            Condition() {
                console.log(this.editForm.triggerCondition);
                if (this.editForm.triggerCondition == 0 || this.editForm.triggerCondition == 4) {
                    this.editFormRules.inputMin = [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }]
                    this.editFormRules.inputMax = [];
                } else if (this.editForm.triggerCondition == 1) {
                    this.editFormRules.inputMin = [];
                    this.editFormRules.inputMax = [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }]
                } else if (this.editForm.triggerCondition == 2 || this.editForm.triggerCondition == 3) {
                    this.editFormRules.inputMax = [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }]
                    this.editFormRules.inputMin = [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }]
                }
            },
            indexMethod(index) {
                let num = (this.page - 1) * 10 + index + 1;
                return num;
            },
            //性别显示转换
            scade() {
                let para = {
                    deviceDataRecipeId: this.editForm.deviceDataRecipeId,
                };
                //NProgress.start();

                device_data_recipe_list_body(para).then((res) => {
                    this.begCode(res.code, res.message);
                    if (res.code == 0) {
                        this.device_datalist = res.data.list;
                    }
                    this.listLoading = false;
                    //NProgress.done();
                });
            },
            formatSex: function (row, column) {
                return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getUsers();
            },
            //获取菜单列表
            getUsers() {
                // if (this.menubt.indexOf('/alarm_trigger_template/query') == -1) {
                //     this.$message({
                //         message: '您没有查询告警配方的权限',
                //         type: 'warning'
                //     });
                //     return false;
                // }
                console.log(this.filters.categoryId)
                let para = {
                    pageNo: this.page,
                    pageSize: 10,
                    categoryId: this.filters.categoryId,
                    systemId: this.systemId,                   
                    title:this.filters.title,
                    status:this.filters.status,
                    free:this.filters.free,
                    orderBy:'article_id desc'
                };
                this.listLoading = true;
                //NProgress.start();
                cms_article_query(para).then((res) => {
                    this.begCode(res.code, res.message);
                    this.total = res.data.totalCount;
                    if (res.code == 0) {
                        this.query = res.data.list;
                        this.page = res.data.pageNo;

                    }

                    this.listLoading = false;
                    //NProgress.done();
                });
            },
            //删除
            handleDel: function (index, row) {

                this.$confirm('确认删除该文章吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = {
                        id: row.articleId
                    };
                    cms_article_delete(para).then((res) => {
                        this.begCode(res.code, res.message);
                        this.listLoading = false;
                        if (res.code == 0) {

                            //NProgress.done();
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getUsers();

                        }
                    });
                }).catch(() => {

                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                let para = {
                    id: row.articleId,
                    cmsUserId:JSON.parse(sessionStorage.getItem('user')).userId

                };
                this.listLoading = true;
                //NProgress.start();
                cms_article_get(para).then((res) => {
                    this.begCode(res.code, res.message);
                    if (res.code == 0) {

                        this.video_true = '0';
                        this.imgs = [];
                        this.editFormVisible = true;
                        this.editForm = res.data;
                        if (this.editForm.imgs == null || !this.editForm.imgs || this.editForm.imgs
                            .length <= 0) {
                            this.editForm.imgs = [];
                        } else {

                            this.editForm.imgs = JSON.parse(this.editForm.imgs)
                            console.log(this.editForm.imgs)
                            for (let i in this.editForm.imgs) {
                                this.imgs.push({
                                    url: this.editForm.imgs[i]
                                })
                            }
                        }

                        console.log(this.editForm.content);
                        if (this.systemId != 1) {

                            console.log(this.editForm.content);
                            this.editForm.content = JSON.parse(res.data.content);
                            console.log(this.editForm.content);
                            // return false
                        }

                        this.fileitem = [];
                        this.fileitemg = [];
                        this.fileitem4 = [];
                        if (this.systemId == 3) {
                            for (let i in this.editForm.content) {
                                this.fileitem.push({
                                    name: this.editForm.content[i],
                                    url: this.editForm.content[i],
                                });
                            }
                        } else if (this.systemId == 2) {
                            console.log(this.editForm.content)
                            this.fileitem.push({
                                name: this.editForm.content.vod_url,
                                url: this.editForm.content.vod_url,
                            });
                        } else if (this.systemId == 4) {
                            
                            this.gcode_list1=[];
                            for(let i in this.editForm.content.gcode_list){
                                 this.editForm.content.gcode_list[i].gcode_file = this.editForm.content.gcode_list[i].gcode_file.replace(
                                    'https://res',
                                    'https://mng');
                                this.gcode_list1.push(this.editForm.content.gcode_list[i]);
                                this.gcode_list1[i].fileitem4=[{
                                     name: 'gcode文件:' + this.editForm.content.gcode_list[i].gcode_file,
                                    url: this.editForm.content.gcode_list[i].gcode_file,
                                }]
                            }
                            // if (this.editForm.content.gcode_file) {
                            //     this.fileitemg.push({
                            //         name: 'gcode文件:' + this.editForm.content.gcode_file,
                            //         url: this.editForm.content.gcode_file,
                            //     });
                            //     this.editForm.content.gcode_file = this.editForm.content.gcode_file.replace(
                            //         'https://res',
                            //         'https://mng');
                            // }
                            if (this.editForm.content.stl_file) {
                                this.fileitem4.push({
                                    name: 'stl文件:' + this.editForm.content.stl_file,
                                    url: this.editForm.content.stl_file,
                                });
                                this.editForm.content.stl_file = this.editForm.content.stl_file.replace(
                                    'https://res',
                                    'https://mng');
                            }
                            this.model_src = 'https://mng.okidea3d.com/thl/thl.html?gcode_file=' + this
                                .editForm.content
                                .gcode_file + '&stl_file=' + this.editForm.content.stl_file + "&s=" + Math
                                .ceil(Math.random() * 10000);
                            console.log(this.model_src)
                            //             console.log(this.editForm)

                        }
                        console.log(this.editForm.content);
                        this.editForm.free=this.editForm.free.toString();
                        
                            this.editForm.price = (this.editForm.price/100).toString();
                    }

                    this.listLoading = false;
                    //NProgress.done();
                });



            },
            //显示新增界面
            handleAdd: function () {

                this.fileitem = [];
                this.fileitem4 = [];
                this.fileitemg = [];
                this.imgs = [];
                this.addForm = {
                    con_type: location.href.split("article/list")[1],
                    content: [],
                    allowcomments: '',
                    articleId: '',
                    categoryId: '',
                    author: 'goofoo',
                    description: '',
                    down: '',
                    free: '0',
                    price: 0,
                    fromurl: '',
                    image: '',
                    imgs: [],
                    keywords: '',
                    orders: '',
                    readnumber: '',
                    status: '',
                    systemId: location.href.split("article/list")[1],
                    title: '',
                    topicId: '',
                    type: '',
                    up: '',
                    userId: '',
                    path: '',

                };
                if(this.systemId!=3){
                    this.addForm.content={}
                }
                this.addFormVisible = true;0
                this.video_true = '0';
                console.log(this.addForm.content)
            },
            //编辑
            typeput(index, s) {
                if (s.top == 0) {
                    s.top = 1;

                } else {
                    s.top = 0;
                }
                console.log(s);
                cms_article_put(s).then((res) => {
                    this.begCode(res.code, res.message);

                    this.editFormVisible = false;
                    if (res.code == 0) {
                        this.editLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.$refs['editForm'].resetFields();
                        this.getUsers();
                    }
                });
            },
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    console.log(this.editForm.content);
                    this.$refs.editForm.validate((valid) => {
                        if (valid) {
                            this.$confirm('确认提交吗？', '提示', {}).then(() => {

                                //NProgress.start();

                    if(this.systemId==4){
                        this.editForm.content.gcode_list=this.gcode_list1;
                        for(let i in this.gcode_list1){
                            if(!this.gcode_list1[i].name){
                                  this.$message({
                                            message: '请填写gcode文件名称',
                                            type: 'error'
                                        });
                                return false
                            }
                        }
                    }
                                console.log(this.editForm.content.gcode_list);
                                console.log(JSON.stringify(this.editForm.content));
                                this.editForm.content = JSON.stringify(this.editForm.content);
                                console.log(this.editForm.content);
                                let para = Object.assign({}, this.editForm);
                                
                                 para.imgs = JSON.stringify(para.imgs);
                                para.price=para.price*100;
                                this.editLoading = true;
                                cms_article_put(para).then((res) => {
                                    this.begCode(res.code, res.message);

                                    this.editFormVisible = false;
                                        this.editLoading = false;
                                    if (res.code == 0) {
                                        //NProgress.done();
                                        this.$message({
                                            message: '提交成功',
                                            type: 'success'
                                        });
                                        this.$refs['editForm'].resetFields();
                                        this.getUsers();
                                    }
                                });
                            });
                        }
                    });
                })
            },
            //新增

            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {

                var ids = this.sels.map(item => item.alarmTriggerId).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = {
                        idList: ids.split(',')
                    };
                    alarm_trigger_template_delete(para).then((res) => {
                        this.begCode(res.code, res.message);
                        this.listLoading = false;
                        //NProgress.done();
                        if (res.code == 0) {

                            //NProgress.done();
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getUsers();

                        }
                    });
                }).catch(() => {

                });
            }
        },
        mounted() {
            console.log(this.$route.query)
            this.systemId = location.href.split("article/list")[1];
            if (this.systemId == 4) {
                this.addForm.content = {
                    duration: "",
                    gcode_file: "",
                    materials: "PLA",
                    size: "",
                    stl_file: "",
                    volume: "",
                }
                this.editForm.content = {
                    duration: "",
                    gcode_file: "",
                    materials: "PLA",
                    size: "",
                    stl_file: "",
                    volume: "",
                }
            } else if (this.systemId == 2) {
                this.addForm.content = {
                    vod_actor: "",
                    vod_director: "",
                    time: "",

                }
                this.editForm.content = {
                    vod_actor: "",
                    vod_director: "",
                    time: "",

                }
            }
            this.menubt = localStorage.getItem('menubt');
            this.getUsers();
            let para = {
                pageNo: 1,
                pageSize: 9999,
                systemId: this.systemId
            };
            let para2 = {
                name: 'alarmLevel',
                pageSize: 999,
                pageNo: 1,
            }
            let para1 = {
                name: 'triggerCondition',
                pageSize: 999,
                pageNo: 1,
            }


            this.listLoading = true;
            //NProgress.start();

            cms_category_query(para).then((res) => {
                this.begCode(res.code, res.message);

                this.addLoading = false;
                if (res.code == 0) {
                    this.typelist = res.data.list;
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }

            });
            let par = {
                pageNo: 1,
                pageSize: 10,
            }
            device_type_query(par).then((res) => {
                // console.log(res)
                this.devicetypeList = res.data.list
            })
        }
    }
</script>

<style>
    .el-form-item .el-form-item {
        margin-bottom: 22px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 240px;
        height: 178px;
        line-height: 178px;
        text-align: center;

    }

    .avatar {
        width: 240px;
        height: 178px;
        display: block;
    }

    #allmap {
        height: 400px;
    }

    .el-dialog {
        width: 80%;
    }

    .el-input .el-input__inner {
        margin-bottom: 10px
    }

    .cropper-content {}

    .cropper-content .cropper {
        width: auto;
        height: 300px;
    }
    .gcode_border{
        padding: 10px;
        border: 1px solid #000;
        margin-top: 10px; 
    }
</style>